<script type="text/javascript" src="../library/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
	function display()
	{
		//window.location = 'album/show/' + $('#albumSelector').val();
		$('#albumID').val($('#albumSelector').val());
	}
</script>
<style>
	img 		{ border-color: black; }
	img.hilite 	{ border-color: red; }
</style>



<?php 
$this->session = new Zend_Session_Namespace('default');
if(isset($this->picsArray))
{
	echo('<a href="album/add">Add Album</a>');
	echo('<br/>');
	foreach ($this->picsArray as $a)
	{
		echo('<span>');
		echo('<img border="4" height="100" width="100" src="'. $a->Filepath .'" alt="'. $a->Name .'" name="'. $a->ImageID .'" />');
		echo('&nbsp; &nbsp;');
		echo('</span>');
	}
	if (isset($this->session->userID)) {
		echo("<form action='album' method='post' onSubmit='display();'>");
		echo("<input type='submit' value='View Album'/>");
		echo("<input type='hidden' id='albumID' name='albumID'/>");
		echo("<input type='hidden' id='imageID' name='imageID'/>");
		echo("</form>");
		
		echo("<p>");
		//echo("<label for='selectedImage'>Selected: </label>");
		echo("<span id='selectedImage'></span>");
		echo("<input type='button' value='Add Attributes' onclick='addMeta()'/>");
		echo("</p>");
		
		echo("<table width='100%'");
		echo("<tr><td width='10%' style='vertical-align: text-top'>");
		echo($this->form);
		echo("</td><td>");
		echo("<img id='bigPic' src=''/>");
	}
}
else 
{
	echo('This album has no images to view.');
}
?>

<script type="text/javascript">
	$("img").click( function() {
		//$("#selectedImage").text( $(this).attr("src") );
		$("#bigPic").attr("src", $(this).attr("src")); 
		$("#imageID").text( $(this).attr('name'));
		$("img").removeClass("hilite");
		$(this).addClass("hilite");

		var xmlhttp;
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange= function()
		{
			if(xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				$('#attrTD').attr("width", "20%");
				$('#attrTD').html(xmlhttp.responseText);
			}
		}
		xmlhttp.open('GET', 'getAttributes.php?imageID=' + $('#imageID').text(), true);
		xmlhttp.send();
	});

	function addMeta() 
	{
		var myImageID = $('#imageID').text();
		if(myImageID != "") {
			window.location = 'metadata/add/' + myImageID;
		}
	}
</script>